<template>
    <popup ref="popRef" width="auto" confirmButtonText="" cancelButtonText="">
        <div ref="posterRef" class="w-[440px] bg-[#f5f5f5]">
            <div class="flex justify-center bg-[#F2F3F6]">
                <!-- <el-image
                    fit="contain"
                    class="h-[440px]"
                    :src="imgContent.thumbnail"
                ></el-image> -->
                <img
                    class="max-h-[440px] object-contain"
                    :src="imgContent.thumbnail || imgContent.image"
                    alt=""
                />
            </div>
            <div class="px-[16px] mt-[12px]">
                <div
                    class="title text-[16px] font-medium text-[#101010] line-clamp-2"
                >
                    {{ imgContent?.promptsCn }}
                </div>
                <div class="text-[#101010] mt-[10px] line-clamp-1">
                    {{ imgContent?.prompts }}
                </div>
            </div>
            <el-divider border-style="dashed" />
            <div class="flex px-[16px] pt-[10px] pb-[30px]">
                <div>
                    <div class="flex items-center">
                        <!-- <el-image
                            class="w-[34px] h-[34px] rounded-full"
                            :src="imgContent.user_info.image"
                        ></el-image> -->
                        <img
                            class="w-[34px] h-[34px] rounded-full"
                            :src="userStore.userInfo.avatar"
                        />
                        <div class="ml-2">
                            {{ userStore.userInfo.nickname }}
                        </div>
                    </div>
                    <div class="mt-[16px] font-medium text-[#101010] text-xl">
                        {{ getWebsiteConfig.pcTitle }}
                    </div>
                    <div class="mt-[10px] text-primary">
                        {{ splitDomain(showLink) }}
                    </div>
                </div>
                <div class="ml-auto p-[10px] bg-white rounded-lg">
                    <QrcodeVue :value="inviteLink" :size="100" :margin="1" />
                </div>
            </div>
        </div>
        <div class="flex mt-[15px]">
            <el-button class="flex-1" type="primary" plain @click="copy(pcLink)"
                >复制链接</el-button
            >
            <el-button class="flex-1" type="primary" @click="download"
                >下载海报</el-button
            >
        </div>
    </popup>
</template>

<script setup lang="ts">
import QrcodeVue from 'qrcode.vue'
import { useAppStore } from '~/stores/app'
import { useUserStore } from '~/stores/user'
import { splitDomain } from '@/utils/util'
import { getApiUrl } from '@/utils/env'
import { downloadHtml2Image } from '@/utils/download'

const popRef = shallowRef()
//海报ref
const posterRef = shallowRef()
const userStore = useUserStore()
const { getWebsiteConfig, config } = useAppStore()
const imgContent: any = ref({})

const open = (option: any) => {
    popRef.value.open()
    imgContent.value = option
    console.log(option)
}

const showLink = computed(
    () => `${window.origin}`
)

const inviteLink = computed(
    () => `${window.origin}/mobile?user_sn=${userStore.userInfo.sn}`
)

const { copy } = useCopy()
const pcLink = computed(
    () => `${window.origin}/pc?user_sn=${userStore.userInfo.sn}`
)

const downloadLoading = ref(false)
const download = async () => {
    try {
        downloadLoading.value = true
        await downloadHtml2Image(posterRef.value)
    } catch (error) {
        feedback.msgError('下载失败，请重试')
    } finally {
        downloadLoading.value = false
    }
}

defineExpose({
    open
})
</script>

<style scoped lang="scss"></style>
